<template>
  <div class="container">
    <div class="header" :style="hbg">
      <div>
        <div>{{name}}</div>
        <div>欢迎回来</div>
      </div>
      <div class="headerimg">
        <img :src="photo+'?width=50&height=50'" alt />
      </div>
    </div>
    <div class="content" @click="$router.push({path:'/ManagerBusiness'})">
      <div class="itemcontent">
        <div>{{datas.length}}</div>
        <div>已提交业务</div>
      </div>
      <div class="center"></div>
      <div class="itemcontent">
        <div>{{finish.length}}</div>
        <div>已完成业务</div>
      </div>
    </div>
    <div class="fun">
      <div
        class="funitem"
        v-for="(item,index) in funList"
        :key="'item'+index"
        @click="fun(item.state)"
      >
        <div>
          <img :src="item.img" alt />
        </div>
        <div>{{item.name}}</div>
        <div>
          <img src="./../assets/images/mine/jiantou.png" alt />
        </div>
      </div>
    </div>
    <ManagerFoot></ManagerFoot>
    <van-loading size="50px" vertical color='#dbb47f' v-if="loginOutShow">
      <span style="color:#dbb47f">正在退出登录...</span>
    </van-loading>
  </div>
</template>
<script>
import ManagerFoot from "./../components/ManagerFoot";
import Api from "./../api/api";
import { Toast } from "vant";
import { Dialog } from "vant";
import { Loading } from 'vant';
export default {
  components: {
    ManagerFoot
  },
  data() {
    return {
      loginOutShow:false,
      hbg: {
        backgroundImage:
          "url(" + require("./../assets/images/mine/hbg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      funList: [
        {
          name: "参与活动",
          img: require("./../assets/images/mine/order.png"),
          state: false
        },
        {
          name: "客服帮助",
          img: require("./../assets/images/mine/xiaoqu.png"),
          state: false
        },
        {
          name: "意见反馈",
          img: require("./../assets/images/mine/shoucang.png"),
          state: false
        },
        {
          name: "退出登录",
          img: require("./../assets/images/mine/loginOut.png"),
          state: true
        }
      ],
      datas: [],
      finish: [],
      name: "",
      photo: ""
    };
  },
  methods: {
    getUserinfo() {},
    fun(state) {
      if (state == false) {
        Toast("暂未开放");
      } else {
        Dialog.confirm({
          message: "是否退出登录"
        })
          .then(() => {
            this.loginOut();
          })
          .catch(() => {});
      }
    },
    //   customerId
    loginOut() {
      this.loginOutShow = true;
      this.$axios
        .get(
          `${Api.HTTP.loginOut}?wechatOpenId=${localStorage.getItem("openId")}`
        )
        .then(res => {
          if (res.data.success) {
            this.loginOutShow = false;
            Toast("退出登录成功");
            this.$router.push({ name: "login" });
            localStorage.removeItem("employeeCode");
          } else {
            this.loginOutShow = false;
            Toast("退出登录失败");
          }
        })
        .catch(function(error) {
          Toast("网络错误");
        });
    },
    findOrder() {
      this.$axios
        .post(
          `${Api.HTTP.findOrder}?employeeCode=${localStorage.getItem(
            "employeeCode"
          )}`
        )
        .then(res => {
          let datas = res.data;
          this.datas = datas;
          datas.forEach(el => {
            if (el.state != 0) {
              this.finish.push(el);
            }
          });
        })
        .catch(function(error) {
          Toast("网络错误");
        });
    }
  },
  mounted() {
    if (
      localStorage.getItem("employeeCode") == null ||
      localStorage.getItem("employeeCode") == "undefined"
    ) {
      this.$router.push({ name: "login" });
    }
    this.findOrder();
    this.name = sessionStorage.getItem("name");
    this.photo = sessionStorage.getItem("photo");
  }
};
</script>
<style scoped>
.fun {
  background: #fff;
  margin-top: 0.2rem;
}
.funitem {
  padding: 0.2rem;
  display: flex;
  align-items: center;
  height: 0.5rem;
  border-bottom: 1px solid #f6f5f5;
  /* justify-content: ; */
}
.funitem > div:nth-child(1) {
  width: 15%;
}
.funitem > div:nth-child(2) {
  font-weight: bold;
  width: 85%;
}
.funitem > div:nth-child(3) {
  text-align: right;
  width: 20%;
}
.funitem > div:nth-child(1) > img {
  width: 0.5rem;
  height: 0.5rem;
}
.funitem > div:nth-child(3) > img {
  width: 0.2rem;
  height: 0.3rem;
}
.content {
  width: 100%;
  padding: 0.3rem;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.itemcontent > div:nth-child(1) {
  font-size: 0.5rem;
  font-weight: bold;
}

.itemcontent > div:nth-child(2) {
  font-size: 0.23rem;
  color: #a9acb5;
  margin-top: 0.1rem;
}
.center {
  width: 0.04rem;
  height: 0.6rem;
  background: #f6f5f5;
}
.container {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding-bottom: 1.2rem;
  background: #f6f5f5;
}
.header {
  padding: 0.4rem 0.5rem;
  box-sizing: border-box;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}
.header div div:nth-child(1) {
  font-size: 0.4rem;
  font-weight: bold;
  margin-bottom: 0.1rem;
}
.headerimg {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  overflow: hidden;
      border: 2px solid #fff;
}
.headerimg img {
  width: 100%;
  height: 100%;
}
</style>